<template>
	<view class="box" style="height: 97.5%;">
		<view class="fcc">
			<view class="type" v-for="(item,index) in dataList" :key="index" :class="{check:index==type}"
				@click="checkType(index)">
				{{item}}
				<text v-if="index==0"> {{goods_evaluate_info.all}}</text>
				<text v-if="index==1"> {{goods_evaluate_info.good}}</text>
				<text v-if="index==2"> {{goods_evaluate_info.normal}}</text>
				<text v-if="index==3"> {{goods_evaluate_info.bad}}</text>
				<text v-if="index==4"> {{goods_evaluate_info.pic}}</text>
			</view>
		</view>
		<view class="flex" v-for="(item,index) in infoList" :key="index">
			<view>
				<view class="flex_center">
					<image class="header" :src="item.geval_frommemberavatar"></image>
					<view class="left">{{item.geval_frommembername}}</view>
					<view class="right">[{{item.geval_addtime}}]</view>
				</view>
				<view class="flex_center">
					<text>用户评价：</text>
					<uni-rate :value="item.geval_scores" size="19" :disabled="true"></uni-rate>
				</view>
				<view class="pt">{{item.geval_content}}</view>
				<view class="flex_center-between">
					<image class="plImage" :src="img" v-for="(img,index2) in item.geval_image"
						:key="index2" @click="openImg(item.geval_image,index2)"></image>
				</view>
				<view class="flex_center" v-if="item.geval_explain" style="margin:20rpx 0 0;">
					<text>商家回复：</text>
				</view>
				<view class="pt" v-if="item.geval_explain">{{item.geval_explain}}</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 60rpx;" v-if="!infoList.length">暂时没有评论!</view>



		<!-- 	<uni-popup ref="ImgSwiper" type="center">
		<view class="swiperBox">
			<swiper class="swiper_box" style="padding: 0; height:750rpx;" @change="swiper" :circular="true" :current="swiperCurrent" indicator-dots="true" >
				<swiper-item v-for="(item,index) in swiperList" :key="index" style="height:1000rpx;">
					<image style="width: 100%;" :src="item" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view> 
			
		</uni-popup> -->



	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			uniRate,
			uniPopup
		},
		data() {
			return {
				dataList: ['全部', '好评', '中评', '差评', "图片"],
				goods_id: 0,
				type: 0,
				infoList: [], //评论详情列表
				curpage: 1,
				goods_evaluate_info: [], //不同评价的条数
				swiperList: [],
				swiperCurrent: 0
			}
		},
		onLoad(e) {
			this.goods_id = e.goods_id
			this.getInfo()
		},
		filters: {
			shengluo(item) {
				console.log(item.split(''))
				let arr = item.split('')
				for (let i = 0; i < arr.length; i++) {
					if (length < 5) {
						if (i == 0 | i == item.length - 1) {

						} else {
							arr.splice(i, 1, '*')
						}
					} else {
						if (i > 1 & i < item.length - 2) {
							arr.splice(i, 1, '*')
						}
					}
				}
				console.log(item)
				return item
			}
		},
		methods: {
			//切换
			checkType(index) {
				this.type = index
				this.getInfo()
			},
			openImg(item, index) {
				uni.previewImage({
					urls: item,
					current: index,
					showmenu:false,
					indicator:'none'
				});
				// this.swiperList = item;
				// this.swiperCurrent = index;
				// this.$refs.ImgSwiper.open()
			},
			getInfo() {
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_evaluate',
					data: {
						goods_id: this.goods_id,
						type: this.type,
						curpage: this.curpage
					}
				}).then(res => {
					this.infoList = res.datas.goodsevallist
					this.goods_evaluate_info = res.datas.goods_evaluate_info
				})
			}
		}
	}
</script>

<style scoped>
	.flex_center {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	uni-page-body {
		background-color: #FFFFFF !important;
	}

	.check {
		background-color: #ff4300 !important;
		color: #FFFFFF;
	}

	.fcc {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.type {
		border-radius: 20rpx;
		background-color: #EEEEEE;
		padding: 4rpx 20rpx;
		margin: 0rpx 10rpx 30rpx;
		word-break: keep-all;
	}

	.pt {
		padding-top: 20rpx;
		border-bottom: 1px solid #e9e6e6;
	}

	.plImage {
		height: 140rpx;
		width: 140rpx;
		border-radius: 10rpx;
		margin-right: 10rpx;
	}

	.box {
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.flex {
		padding-top: 20rpx;
		display: flex;
		padding-bottom: 40rpx;
		border-bottom: 1px solid #F0F0F0;
	}

	.flex:last-child {
		border: none;
	}

	.header {
		height: 70rpx;
		width: 70rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.left {
		/* font-weight: bold; */
		color: #333333;
		margin-right: 20rpx;
	}

	.right {
		font-size: 26rpx;
		color: #999999;
	}

	.flex_center-between {
		display: flex;
		align-items: center;
	}

	.swiperBox {
		width: 750rpx;
		background-color: #FFFFFF;
	}

	.swiperBox image {}
</style>